import Vue from 'vue'
import VueRouter from 'vue-router'

import store from '@/store' //导入Vuex对象
//import axios from 'axios'
import axios from '@/api'   //引入自定义myaxios。因为myaxios设置请求拦截器，每次请求都会带有token

Vue.use(VueRouter)

const routes = [
  {
    name: 'Home',
    path: '/',
    component: () => import('@/views/Home.vue'),
    children: [
      // {
      //   path: '/citys',
      //   name: 'Citys',
      //   meta: {
      //     icon: 'el-icon-school', //图标
      //     title: '城市案例', //菜单标题
      //   },
      //   component: () => import('@/views/Citys.vue'),
      // },
      {
        //系统首页
        path: '/index',
        name: 'Index',
        meta: {
          icon: 'el-icon-s-home', //图标
          title: '首页', //菜单标题
        },
        component: () => import('@/views/system/Index.vue'),
      },
      {
        //个人中心
        path: '/usercenter',
        name: 'UserCenter',
        meta: {
          icon: 'el-icon-user', //图标
          title: '个人中心', //菜单标题
        },
        component: () => import('@/views/UserCenter.vue'),
      },
    ],
  },
  {
    path: '/login',
    name: 'Login',
    component: () => import('@/views/Login.vue'),
  },

  {
    path: '/notfound',
    name: 'NotFound',
    component: () => import('@/views/NotFound.vue'),
  },
]
const router = new VueRouter({
  routes,
})

//路由守卫( 导航守卫 )
router.beforeEach((to, from, next) => {
  //加载菜单数据： (菜单数据加载过了，就不要再加载)
  let hasRoute = store.state.menus.hasRoute
  let menus = store.state.menus.menuList
  let token = store.state.token

  //路由守卫会拦截所有请求，需要对请求路径过滤。
  if (to.path == '/login') {
    next() //放行(到达要访问资源)
  } else if (to.path == '/' || to.path == '') {
    next({ to: '/' })
  }
  if (!hasRoute) {
    //得到目前路由配置数组
    let newRoutes = router.options.routes
    console.log('加载菜单数据----')
    //hasRoute如果为false，就加载菜单数据
    axios
      .get('/menu/nav')
      .then(response => {
        store.commit('SET_MENULIST', response.data.resultdata.nav) //将获得菜单数据存储到Vuex中
        store.commit('SET_PERMLIST', response.data.resultdata.authoritys) //将权限数据存储到Vuex中

        //TODO:创建动态路由
        response.data.resultdata.nav.forEach(menu => {
          if (menu.children) {
            //循环二级菜单
            menu.children.forEach(child => {
              let route = menuToRoute(child) //得到创建好的路由配置对象
              if (route) {
                //需要将创建路由配置对象，加到目前路由配置数组中
                newRoutes[0].children.push(route)
              }
            })
          }
        })
        //将配置完毕新 路由配置数组newRoutes,重新放回到router路由对象中
        router.addRoutes(newRoutes)
        store.commit('SET_HASROUTE', true)
        console.log('222',router);
        next({ path: to.path }) //跳转至原本要访问的地址
      })
      .catch(error => {
        console.log(error)
      })
  } else {
    console.log('菜单和路由配置加载过了----')
    next()
  }
})

//封装方法：由菜单数据创建出 路由配置对象
const menuToRoute = child => {
  if (!child.component) {
    //菜单如果component组件属性为空，直接返回null
    return null
  }
  //创建路由配置对象
  let route = {
    path: child.path,
    name: child.name,
    meta: {
      //配置元数据( 在路由对象中携带一些 对象数据 )，做Tab选项卡
      icon: child.icon, //图标
      title: child.title, //菜单标题
    },
  }
  route.component = () => import('@/views/' + child.component + '.vue')
 
  return route
}

export default router
